<template>
  <div v-slide-in id="complex-gradient-transition">
    <p>云想衣裳花想容，春风扶槛露华浓。</p>
    <h6 style="margin-top: -0.5%;">豫IPC第1999号，版权所有</h6>
  </div>
</template>

<script>

let complexTransitionTime = 3000    // <-- 对于复杂动画
let transitionTime = 1000          // <-- 100毫秒的时间，我们的动画将持续
let previousTime, start = 0;        // <-- 将数据存储在动画中
let angle = 180;                    // <-- 倾斜角
let animationDirection = 'forwards' // <-- 存储动画方向
let complexAnDirection = 'forwards' // <-- 对于连续动画
let intervalFrame;                          // <-- 存储间隔帧
let complexIntervalFrame;                   // <-- “永远打开”的梯度转换
let currentPct = 0;                         // <-- 通过动画的当前百分比
let complexCurrentPct = 0;                  // <-- 当前PCT用于复杂动画
let elapsed = 0;                            // <-- 已经失效的帧数
let complexElapsed = 0;                     // <-- 复运行时间


//  颜色渐变
const gradientStopOne = [
  { pct: 0, color: { r: 255, g: 113, b: 71 } }, // 渐变中的第一种颜色
  { pct: 100, color: { r: 0, g: 55, b: 255 } }   // 你想让你的第一种颜色过渡到的颜色
];
const gradientStopTwo = [
  { pct: 0, color: { r: 224, g: 65, b: 127 } }, // 渐变中的第二种颜色
  { pct: 100, color: { r: 0, g: 173, b: 255 } }  // 你想让第二种颜色过渡到的颜色
]
const complexGradientOne = [
  { pct: 0, color: { r: 224, g: 65, b: 127 } },
  { pct: 33, color: { r: 0, g: 173, b: 255 } },
  { pct: 66, color: { r: 203, g: 252, b: 5 } },
  { pct: 100, color: { r: 98, g: 5, b: 252 } }
]
const complexGradientTwo = [
  { pct: 0, color: { r: 255, g: 113, b: 71 } },
  { pct: 33, color: { r: 0, g: 55, b: 255 } },
  { pct: 66, color: { r: 30, g: 177, b: 7 } },
  { pct: 100, color: { r: 228, g: 44, b: 200 } }
]
// 以编程方式应用我们的渐变，这样我们就可以完全从JS而不是CSS操作渐变
let c1 = gradientStopOne[0].color;
let c2 = gradientStopTwo[0].color;

// 这个函数在两种rgb颜色之间转换
const getColor = function (pct, colorSet) {
  for (var i = 1; i < colorSet.length - 1; i++) {
    if (pct < colorSet[i].pct) {
      break;
    }
  }
  // 这个转换计算出两个rgb值之间的转换
  var lower = colorSet[i - 1];
  var upper = colorSet[i];
  var range = upper.pct - lower.pct;
  var rangePct = (pct - lower.pct) / range;
  var pctLower = 1 - rangePct;
  var pctUpper = rangePct;
  var color = {
    r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
    g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
    b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
  };
  // 返回rgb代码e
  return `rgb(${color.r}, ${color.g}, ${color.b})`;
}

// 这是我们在悬停时运行的动画
const animateGradient = function () {
  if (intervalFrame === undefined) {
    intervalFrame = setInterval(() => {
      let time = transitionTime / 1000; // time in seconds
      let numberOfFrames = time * 60; // 60 frames per second -> 1 second = 60 frames

      // 如果动画是向前的
      if (animationDirection === 'forwards') {
        // 给elapsed加1
        elapsed += 1;
        // 超出最大帧数的经过帧数
        currentPct = Math.min(elapsed / numberOfFrames, 1) * 100;
      }
      else {
        // 否则我们要往回走，从ellapped减去1
        elapsed -= 1;
        // 超出最大帧数的经过帧数
        currentPct = Math.max(elapsed / numberOfFrames, 0) * 100;
      }

      // 在此时间内计算每个渐变颜色的当前颜色
      let colorOne = getColor(currentPct, gradientStopOne);
      let colorTwo = getColor(currentPct, gradientStopTwo);

      // 生成CSS字符串
      let generateGradient = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;

      // 将它添加到我们的背景中.
      document.getElementById(element).style.backgroundImage = generateGradient;

      // 结束后就结束停止
      if (currentPct === 100 || currentPct === 0) {
        clearInterval(intervalFrame);
        intervalFrame = undefined;
      }
    }, 16.667); // 60 frames per second
  }
};

// 这是我们在悬停时运行的动画
const complexGradientAnimation = function () {
  if (complexIntervalFrame === undefined) {
    complexIntervalFrame = setInterval(() => {
      let time = complexTransitionTime / 1000;
      let numberOfFrames = time * 60; // 60 frames per second -> 1 second = 60 frames

      if (complexCurrentPct === 100) {
        complexAnDirection = 'backwards';
      }
      else if (complexCurrentPct === 0) {
        complexAnDirection = 'forwards';
      }
      // 如果动画是向前的
      if (complexAnDirection == 'forwards') {
        complexElapsed += 1;
        // 超出最大帧数的经过帧数
        complexCurrentPct = Math.min(complexElapsed / numberOfFrames, 1) * 100;
      }
      else if (complexAnDirection === 'backwards') {
        complexElapsed -= 1;
        complexCurrentPct = Math.max(complexElapsed / numberOfFrames, 0) * 100;
      }

      // 在此时间内计算每个渐变颜色的当前颜色
      let colorOne = getColor(complexCurrentPct, complexGradientOne);
      let colorTwo = getColor(complexCurrentPct, complexGradientTwo);

      let generateGradient = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;

      document.getElementById('complex-gradient-transition').style.backgroundImage = generateGradient;

    }, 16.667); // 60 frames per second
  }
};


complexGradientAnimation();
</script>

<style>
#complex-gradient-transition {
  z-index: 1000;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background: linear-gradient(180deg, #ff7147, #e0417f);
  color: white;
  font-size: 1.1rem;
  width: 100%;
}
</style>